<script setup>
import { useTimetableStore } from "~/store/timetable.js";
import {storeToRefs} from "pinia";
import {useCurrentState} from "~/store/currentState.js";

const timetableStore = useTimetableStore()

const timetableList = storeToRefs(timetableStore).timetable
const timetableList_next = storeToRefs(timetableStore).timetablenext
const currentState = useCurrentState()
const currentStateList = storeToRefs(currentState).state

const currentTitle = ref('')



function getWeekBounds(weekOffset = 0) {
  const now = new Date();
  const dayOfWeek = now.getDay();

  const startOfWeek = new Date(now.setDate(now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) + weekOffset * 7));
  const endOfWeek = new Date(now.setDate(now.getDate() - dayOfWeek + 7 - (dayOfWeek === 0 ? 1 : 0) + weekOffset * 7));

  const startFormatted = startOfWeek.toLocaleDateString('ru-RU', { day: '2-digit', month: 'long' });
  const endFormatted = endOfWeek.toLocaleDateString('ru-RU', { day: '2-digit', month: 'long' });

  return [startFormatted, endFormatted];
}

function getScheduleForGroup(data, groupId) {
  for (let course of data) {
    let group = course.groups.find(group => group.id === groupId);
    if (group) {
      currentTitle.value = group.name
      return group.days;
    }
  }
  return null;
}



const currentWeekDays = ref(getWeekBounds())
const nextWeekDays = ref(getWeekBounds(1))

const isNextWeek = ref(false)

const currentTimetable = ref({})

const getGroupTimetable = () => {
  const id = currentState.state.data

  let timetable = timetableList.value

  if (isNextWeek.value) {
      timetable = timetableList_next.value
  }

  timetable = getScheduleForGroup(timetable, id)

  for (let i of timetable) {
    i.lessons = i.lessons.flat()
  }
  currentTimetable.value = timetable
  console.log(currentTimetable.value)
}

watch(currentStateList, (value, oldValue, onCleanup) => {
  update(value)
})

watch(isNextWeek, (value, oldValue, onCleanup) => {
  update(currentStateList.value)
})

const update = (value) => {
    if (value.type === 'group') {
    getGroupTimetable()
  }
}
</script>

<template>
  <div class="dark:bg-slate-800 flex flex-col justify-start items-center overflow-x-hidden overflow-y-scroll">
    <span v-show="(currentState.state.type === 'group') && !isNextWeek" class="text-center dark:text-white text-3xl p-12 relative">{{currentWeekDays[0]}} - {{currentWeekDays[1]}}
    <Icon icon="heroicons:chevron-left" size="40" class="absolute left-0 cursor-pointer" @click="isNextWeek=false"/>
    <Icon icon="heroicons:chevron-right" size="40" class="absolute right-0 cursor-pointer" @click="isNextWeek=true"/>
    </span>

    <span v-show="(currentState.state.type === 'group') && isNextWeek" class="text-center dark:text-white text-3xl p-12 relative">{{nextWeekDays[0]}} - {{nextWeekDays[1]}}
    <Icon icon="heroicons:chevron-left" size="40" class="absolute left-0 cursor-pointer" @click="isNextWeek=false"/>
    <Icon icon="heroicons:chevron-right" size="40" class="absolute right-0 cursor-pointer" @click="isNextWeek=true"/>
    </span>

    <span v-show="currentState.state.type === 'group'" class="text-center dark:text-white text-4xl">{{currentTitle}}</span>
    <div class="grid grid-minmax w-full-p-5 p-5 gap-5" v-if="currentState.state.type === 'group'">
      <div class="flex flex-col  gap-5" v-for="day in currentTimetable" :key="day.day">
        <span class="text-2xl dark:text-white text-center" v-if="day.lessons.length > 0">{{day.day}}</span>
        <div class="flex justify-between items-center p-5 bg-slate-700 rounded-3xl" v-for="lesson in day.lessons[0].number-1" v-if="day.lessons.length > 0" >
          <span class="text-4xl dark:text-white">{{lesson}}</span>
        </div>
        <div class="flex justify-start items-center p-5 bg-slate-700 rounded-3xl" v-for="lesson in day.lessons" v-if="day.lessons.length > 0" >
          <span class="text-4xl dark:text-white">{{lesson.number}}</span>
          <div class="flex flex-col ml-5">
          <span class="text-xl dark:text-white text-start">{{lesson.name}}</span>
          <span class="text-lg dark:text-slate-300 text-start">{{lesson.teacher}}</span>
          </div>
          <span class="text-3xl dark:text-white text-end flex-grow">{{lesson.cabinet}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .grid-minmax {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
  .w-full-p-5 {
    width: calc(100% - 1.25rem);
  }
</style>